
// 确保在 DOM 加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 使用 ID 选择器而不是类选择器，或者确保 .j1 类存在
  const chartDom = document.querySelector('.j6');
  
  // 检查元素是否存在
  if (!chartDom) {
    console.error('找不到图表容器元素，请确保页面上有 .j1 类的元素');
    return;
  }
  
  // 确保元素有宽度和高度
  if (!chartDom.style.width) chartDom.style.width = '700px';
  if (!chartDom.style.height) chartDom.style.height = '520px';
  
  // 初始化 ECharts 实例
  const myChart = echarts.init(chartDom);
  
  // 设置图表选项
  option = {
  title: {
    text: '新型灵活就业的招聘职位数占比（招聘规模）变化',
    left: 'center',
    textStyle: {
      fontSize: 22,
      fontWeight: 'bold',
      color:'rgb(110, 93, 45)'
    }
  },
  tooltip: {
    trigger: 'axis',
    formatter: '{b}: {c}%'
  },
  xAxis: {
    type: 'category',
    data: ['2019', '2020', '2021', '2022', '2023', '2024'],
    axisLabel: {
      fontSize: 12
    }
  },
  yAxis: {
    type: 'value',
    name: '占比 (%)',
    nameTextStyle: {
      padding: [0, 0, 0, 40]
    },
    axisLabel: {
      formatter: '{value}%'
    }
  },
  series: [
    {
      name: '职位数占比',
      data: [8.4, 9.6, 10, 11.6, 12.2, 15.2],
      type: 'line',
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: 'rgb(162, 113, 111)'
      },
      lineStyle: {
        width: 3
      },
      label: {
        show: true,
        formatter: '{c}%',
        position: 'top'
      }
    }
  ],
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  }
};
option && myChart.setOption(option);
  
  // 使用配置项显示图表
  myChart.setOption(option);
  
  // 监听窗口大小变化，自动调整图表大小
  window.addEventListener('resize', function() {
    myChart.resize();
  });
});